/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="map-layers">
    <a href="javascript:void(0)" class="map-layers-btn" @click="handlerLayer">
      <i class="iconfont icon-tuceng"></i>
    </a>
    <div :class="['content', layerVis ? '' : 'content-hide']">
      <el-checkbox-group v-model="checkedLayers" class="checkbox-group">
        <el-checkbox label="1" style="margin: 0;">已签约</el-checkbox>
        <el-checkbox label="0" style="margin: 0;">未签约</el-checkbox>
        <el-checkbox label="HDVLayer" style="margin: 0;">高清图层</el-checkbox>
        <el-checkbox label="redPolygon" style="margin: 0;">红线</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedLayers: ["HDVLayer", "redPolygon", '0', '1'],
      layerVis: false
    };
  },
  watch: {
    checkedLayers: function(data) {
      const pointers = this.$parent.pointers;
      const allData = this.$parent.allData;
      const animatePointers = this.$parent.animatePointers;
      const mapLayers = this.$parent.mapLayers;
      const allLayers = ["HDVLayer", "redPolygon", "1", "0"];
      const status1 = allData
        .filter(item => item.status === 1)
        .map(j => j.serialno); //已签约
      const status0 = allData
        .filter(item => item.status === 0)
        .map(j => j.serialno); //未签约
      for (let i = 0; i < allLayers.length; i++) {
        let item = allLayers[i];
        if (data.indexOf(item) != -1) {
          switch (item) {
            case "HDVLayer":
              mapLayers["HDVLayer"].show();
              break;
            case "redPolygon":
              mapLayers["redPolygon"].show();
              break;
            case "1":
              if (pointers && pointers.length > 0) {
                status1.map(item => pointers[item].show());
                status1.map(item => animatePointers[item].show());
              }
              break;
            case "0":
              if (pointers && pointers.length > 0) {
                status0.map(item => pointers[item].show());
              }
              break;
            default:
              console.log("没有当前图层!");
              break;
          }
        } else {
          switch (item) {
            case "HDVLayer":
              mapLayers["HDVLayer"].hide();
              break;
            case "redPolygon":
              mapLayers["redPolygon"].hide();
              break;
            case "1":
              if (pointers && pointers.length > 0) {
                status1.map(item => pointers[item].hide());
                status1.map(item => animatePointers[item].hide());
              }
              break;
            case "0":
              if (pointers && pointers.length > 0) {
                status0.map(item => pointers[item].hide());
              }
              break;
            default:
              console.log("没有当前图层!");
              break;
          }
        }
      }
    }
  },
  methods: {
    handlerLayer: function() {
      this.layerVis = !this.layerVis;
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.map-layers {
  position: fixed;
  top: 2vw;
  right: 10vw;
  // background: red;
  z-index: 2;
  width: 3vw;
  height: 3vw;
  border-radius: 3vw;
}

.map-layers-btn {
  border-radius: 30px;
  // border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  i {
    color: #fff;
    font-size: 3rem;

  }
}
.content {
  width: 100px;
  height: 158px;
  border-radius: 10px;
  background: @bg;
  position: absolute;
  top: 3rem;
  right: 3rem;
  display: flex;
  justify-content: flex-start;
  transition: all ease-out 0.3s;
  overflow: hidden;
  .checkbox-group {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    label {
      padding: 10px;
      color: #fff;
    }
  }
}
.content-hide {
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>
